<template>
  <view class="user-page">
    <!-- 顶部区域（包含背景图 + 头像/文字内容） -->
    <view class="header-container">
      <!-- 背景图容器 -->
      <image class="header-bg" src="/static/c.png" mode="widthFix"></image>
      <!-- 顶部内容 -->
      <view class="header-content">
        <image class="fox-avatar" src="/static/小狐狸.png" mode="widthFix"></image>
        <view class="welcome-box">
          <text class="welcome-text">HI~欢迎回来</text>
          <!-- 登录按钮/用户名显示 -->
          <navigator url="/pages/Login/Login" v-if="!isLogin">
            <button class="login-btn" @click="handleLogin">登录</button>
          </navigator>
          <view v-else class="user-name">{{ userName || '我的' }}</view>
        </view>
      </view>
    </view>

    <!-- 统计数据区域 -->
    <view class="stats-box">
      <view class="stat-item">
        <text class="stat-value">关注37</text>
      </view>
      <view class="divider"></view>
      <view class="stat-item">
        <text class="stat-value">话题8</text>
      </view>
    </view>

    <!-- 功能图标区 -->
    <view class="func-icons">
      <view class="func-item" @click="goTo('collect')">
        <image class="func-icon" src="/static/收藏1 (1).png" mode="widthFix"></image>
        <text class="func-text">收藏</text>
      </view>
      <view class="func-item" @click="goTo('history')">
        <image class="func-icon" src="/static/历史.png" mode="widthFix"></image>
        <text class="func-text">历史</text>
      </view>
      <view class="func-item" @click="goTo('setting')">
        <image class="func-icon" src="/static/设置的副本.png" mode="widthFix"></image>
        <text class="func-text">设置</text>
      </view>
    </view>

    <!-- 广告横幅 -->
    <view class="ad-banner">
      <image class="ad-image" src="/static/ad-redpacket.png" mode="widthFix"></image>
    </view>

    <!-- 功能按钮区 -->
    <view class="action-buttons">
      <view class="action-btn" @click="publish('video')">
        <image class="action-icon" src="/static/icon-video.png" mode="widthFix"></image>
      </view>
      <view class="action-btn" @click="publish('image')">
        <image class="action-icon" src="/static/icon-image.png" mode="widthFix"></image>
      </view>
      <view class="action-btn" @click="publish('link')">
        <image class="action-icon" src="/static/icon-link.png" mode="widthFix"></image>
      </view>
    </view>

    <!-- 统计文本 -->
    <view class="stat-text">
      已有385,893人<br>在这里发布身边的新鲜事
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false, // 登录状态
      userName: ''    // 登录用户名称
    };
  },
  onShow() {
    // 页面每次显示时，重新读取登录状态和用户名
    this.checkLoginStatus();
  },
  methods: {
    // 校验登录状态 + 读取用户名
    checkLoginStatus() {
      const isLogin = uni.getStorageSync("isLogin"); // 读取登录状态
      const userInfo = uni.getStorageSync("userInfo"); // 读取用户信息
      this.isLogin = !!isLogin;
      this.userName = userInfo?.username || ''; // 从userInfo中获取用户名
    },

    // 跳转登录页
    handleLogin() {
      uni.navigateTo({ url: '/pages/Login/Login' });
    },

    // 功能入口跳转（需登录）
    goTo(type) {
      if (!this.isLogin) {
        uni.showToast({ title: "请先登录", icon: "none" });
        this.handleLogin();
        return;
      }
      switch (type) {
        case 'collect':
          uni.navigateTo({ url: '/pages/collect/collect' });
          break;
        case 'history':
          uni.navigateTo({ url: '/pages/history/history' });
          break;
        case 'setting':
          uni.navigateTo({ url: '/pages/setting/setting' });
          break;
      }
    },

    // 发布功能（需登录）
    publish(type) {
      if (!this.isLogin) {
        uni.showToast({ title: "请先登录", icon: "none" });
        this.handleLogin();
        return;
      }
      uni.navigateTo({ url: `/pages/publish/publish?type=${type}` });
    }
  }
};
</script>

<style scoped lang="scss">
.user-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 0;
  box-sizing: border-box;
}

// 顶部背景图容器
.header-container {
  position: relative;
  width: 100%;
  padding: 60rpx 20rpx 40rpx;
  box-sizing: border-box;

  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 0 20rpx 20rpx;
    z-index: 0;
  }

  .header-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
  }
}

// 头像样式
.fox-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  border: 3rpx solid #fff;
}

// 欢迎文字/登录按钮容器
.welcome-box {
  flex: 1;

  .welcome-text {
    font-size: 32rpx;
    color: #333;
    display: block;
    margin-bottom: 20rpx;
    text-shadow: 0 1rpx 2rpx rgba(255,255,255,0.8);
  }

  .login-btn {
    width: 140rpx;
    height: 60rpx;
    line-height: 60rpx;
    background-color: rgba(255,103,0,0.9);
    color: #fff;
    border-radius: 30rpx;
    font-size: 28rpx;
    border: none;
    padding: 0;
  }

  .user-name {
    min-width: 140rpx;
    max-width: 200rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 28rpx;
    color: #333;
    background-color: rgba(255,255,255,0.8);
    border-radius: 30rpx;
    padding: 0 20rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 统计数据区域
.stats-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20rpx 60rpx;

  .stat-item {
    text-align: center;

    .stat-value {
      font-size: 30rpx;
      color: #666;
      font-weight: 500;
    }
  }

  .divider {
    width: 2rpx;
    height: 30rpx;
    background-color: #e0e0e0;
    margin: 0 40rpx;
  }
}

// 功能图标区
.func-icons {
  display: flex;
  justify-content: space-around;
  margin: 0 20rpx 60rpx;

  .func-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .func-icon {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
    }

    .func-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

// 广告横幅
.ad-banner {
  width: 100%;
  padding: 0 20rpx 60rpx;
  box-sizing: border-box;

  .ad-image {
    width: 100%;
    height: auto;
    border-radius: 10rpx;
  }
}

// 发布功能按钮区
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 80rpx;
  margin-bottom: 60rpx;

  .action-btn {
    .action-icon {
      width: 100rpx;
      height: 100rpx;
    }
  }
}

// 统计文本
.stat-text {
  text-align: center;
  font-size: 26rpx;
  color: #999;
  line-height: 1.6;
  padding-bottom: 40rpx;
}
</style>